<template>
  <el-dialog title="详情页面" :visible.sync="show" width="1200px" append-to-body :before-close="close">
    <el-form ref="form" label-position="left" :model="form" label-width="140px">
      <el-divider content-position="center">基本信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="电商订单号" prop="orderId">
            {{ form.orderId }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单时间" prop="orderDate">
            {{ form.orderDate }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="realPayment">
            <span slot="label">
              实付款
              <el-tooltip content="商品价格+运杂费+代扣税款-非现金抵扣金额，与支付凭证 的支付金额一致" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>
            </span>
            {{ form.realPayment }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="amount">
            <span slot="label">
              商品金额
              <el-tooltip content="商品实际成交价 FOB(不含运杂费)，含非现金抵扣金额" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.amount }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="tax">
            <span slot="label">
              代扣税款
              <el-tooltip content="非现金抵扣金额（使用积分、虚拟货币、代金券等非现金支付金额，无则填写 “0”" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.tax }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="distributionfee">
            <span slot="label">
              运杂费
              <el-tooltip content="无则填写“0”" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.distributionfee }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="discount">
            <span slot="label">
              非现金抵扣
              <el-tooltip content="非现金抵扣金额（使用积分、虚拟货币、代金券等非现金支付金额，无则填写 “0”" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.discount }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="币制" prop="currency">
            {{ form.currency }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付交易编号" prop="payOrderNo">
            {{ form.payOrderNo }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="订购人" prop="buyerName">
            {{ form.buyerName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订购人证件号" prop="ConsigneeCode">
            {{ form.ConsigneeCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人" prop="distributionfee">
            {{ form.contactName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收货人电话" prop="contactMobile">
            {{ form.contactMobile }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货地址" prop="contactAddr">
            {{ form.contactAddr }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="详细地址" prop="detailAddr">
            {{ form.detailAddr }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="邮政编码" prop="postcode">
            {{ form.postcode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="contactAddr">
            <span slot="label">
              清单状态:
            </span>
            {{ this.statusFormat(form.push_inventory, this.PushInventoryOptions) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="清单编号" prop="invt_no">
            {{ form.invt_no }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="备注" prop="note">
            {{ form.note }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="center">平台信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="ebpCode">
            <span slot="label">
              电商平台代码
              <el-tooltip content="电商平台的海关注册登记编号" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.ebpCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电商平台名称" prop="ebpName">
            <span slot="label">
              电商平台名称
              <el-tooltip content="电商平台的海关注册登记的平台名称" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.ebpName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="paycomCode">
            <span slot="label">
              支付企业代码
              <el-tooltip content="支付企业的海关注册登记编号" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.paycomCode }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="paycomName">
            <span slot="label">
              支付企业名称
              <el-tooltip content="支付企业在海关注册登记的企业名称" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.paycomName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="ebcCode">
            <span slot="label">
              电商企业代码
              <el-tooltip content="电商企业在海关注册登记的登记编号" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.ebcCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="ebcName">
            <span slot="label">
              电商企业代码
              <el-tooltip content="电商企业在海关注册登记的企业名称" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.ebcName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="express_company">
            <span slot="label">
              快递公司
              <el-tooltip content="国内物流承运快递公司" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.express_company }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="express_no">
            <span slot="label">
              快递单号
              <el-tooltip content="国内物流承运的快递单号" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.express_no }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="bill_no">
            <span slot="label">
              运单号
              <el-tooltip content="国外物流承运的运单号" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>

            </span>
            {{ form.bill_no }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="center">商品信息</el-divider>
      <el-table :data="form.goodsListStr" border stripe style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="原产国(地区)编码">
                {{ getJson(scope.row.origin_country_code,2) }}
              </el-form-item>
              <el-form-item label="贸易国编号">
                {{ getJson(scope.row.trade_country_code,2) }}
              </el-form-item>
              <el-form-item label="规格型号">
                {{ scope.row.g_model }}
              </el-form-item>
              <el-form-item label="币制">
                {{ getJson(scope.row.currency_code,1) }}
              </el-form-item>
              <el-form-item label="计量单位">
                {{ getJson(scope.row.unit,3) }}
              </el-form-item>
              <el-form-item>
                <span slot="label">
                  计量数量
                  <el-tooltip content="商品数量*组合规格" placement="top">
                    <i class="el-icon-info" />
                  </el-tooltip>
                </span>
                {{ scope.row.num*scope.row.spec_qty }}
              </el-form-item>
              <el-form-item label="法定计量单位">
                {{ getJson(scope.row.unit1,3) }}
              </el-form-item>
              <el-form-item label="法定计量数量">
                {{ scope.row.qty1 }}
              </el-form-item>
              <el-form-item label="法定第二计量单位">
                {{ getJson(scope.row.unit2,3) }}
              </el-form-item>
              <el-form-item label="法定第二计量数量">
                {{ scope.row.qty2 }}
              </el-form-item>
              <el-form-item label="净重（KG）">
                {{ scope.row.net_weight }}
              </el-form-item>
              <el-form-item label="毛重（KG）">
                {{ scope.row.gross_weight }}
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="RecordMaterialNo" label="账册备案料号">
          <template slot-scope="scope">
            {{ scope.row.record_material_no }}
          </template>
        </el-table-column>
        <el-table-column prop="goods_name" label="电商平台品名">
          <template slot-scope="scope">
            {{ scope.row.goods_name }}
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="海关登记品名">
          <template slot-scope="scope">
            {{ scope.row.g_name }}
          </template>
        </el-table-column>
        <el-table-column prop="GCode" label="海关编码">
          <template slot-scope="scope">
            {{ scope.row.g_code }}
          </template>
        </el-table-column>
        <el-table-column prop="barcode" label="条形码">
          <template slot-scope="scope">
            {{ scope.row.barcode }}
          </template>
        </el-table-column>
        <el-table-column prop="num" label="商品数量">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column prop="spec_qty" label="组合规格">
          <template slot-scope="scope">
            {{ scope.row.spec_qty }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
      </el-table>
      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button size="medium" @click="close()">关 闭</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 40%;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;
  margin-bottom: 6vh !important;
}
</style>
<script>
export default {
  name: 'OrderDetails',
  props: {
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    show: {
      type: Boolean
    }
  },
  data() {
    return {
      // 清单状态
      PushInventoryOptions: [
        { 'value': 0, 'label': '未推送' },
        { 'value': 1, 'label': '电子口岸已暂存' },
        { 'value': 2, 'label': '电子口岸申报中' },
        { 'value': 3, 'label': '发送海关成功' },
        { 'value': 4, 'label': '发送海关失败' },
        { 'value': 100, 'label': '海关退单' },
        { 'value': 120, 'label': '海关入库' },
        { 'value': 300, 'label': '人工审核' },
        { 'value': 399, 'label': '海关审结' },
        { 'value': 800, 'label': '放行' },
        { 'value': 899, 'label': '结关' },
        { 'value': 500, 'label': '查验' },
        { 'value': 501, 'label': '扣留移送通关' },
        { 'value': 502, 'label': '扣留移送缉私' },
        { 'value': 503, 'label': '扣留移送法规' },
        { 'value': 599, 'label': '其它扣留' },
        { 'value': 700, 'label': '退运' }
      ]
    }
  },
  created() {
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    /** 状态转换 */
    statusFormat(field, Options) {
      for (const d of Options) {
        if (field === d.value) {
          field = d.label
          break
        }
      }
      return field
    }
  }
}
</script>
